<template>
  <div id="user-edit">
    <van-popup v-model="$store.state.user.userEditPop" class="edit-user-show" closeable position="bottom">
      <div style="height: 55px;justify-content: left!important;" class="flex-center">
        <img src="@/public/img/cat.png" class="title-img" alt="">
        <p>{{data.id ? '编辑' : '新增'}}员工</p>
      </div>

      <van-form style="padding-bottom: 80px">
        <van-field readonly name="orgKeyPicker" :value="storesName" label="门店权限" @click="orgKeyPickerClick"/>
        <van-popup v-model="orgKeyPicker" position="bottom">
          <multi-store-select :value.sync="data.storesList" />
        </van-popup>

        <van-field v-if="$store.dispatch('hasRight', ['master'])"
            readonly name="rightPicker" :value="rightName" label="角色权限" @click="rightPickerClick"/>


        <van-popup v-model="rightPicker" position="bottom">
          <multi-select :list="$store.state.options.rightList" :value.sync="data.rightList"  />
        </van-popup>



        <van-field v-model="data.mobile"
          name="mobile" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填手机号' }]"/>

        <van-field v-model="data.name" name="name" label="姓名"
                   placeholder="姓名" :rules="[{ required: true, message: '请填写小伙伴姓名' }]"/>

        <van-field readonly name="isForbidden" label="是否禁用">
          <template #input="props">
            <van-radio-group v-model="data.isForbidden" name="isForbidden" direction="horizontal">
              <van-radio :name="0" checked-color="#ee0a24">启用</van-radio>
              <van-radio :name="1" checked-color="#ee0a24">禁用</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field readonly name="reset" label="重置密码" error-message="店员忘记密码再选，重置后密码为123456">
          <template #input="props">
            <van-radio-group v-model="data['isResetPas']" name="isResetPas" direction="horizontal">
              <van-radio :name="0" checked-color="#ee0a24">不重制</van-radio>
              <van-radio :name="1" checked-color="#ee0a24">重制（慎选）</van-radio>
            </van-radio-group>
          </template>
        </van-field>


        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import MultiStoreSelect from "@/components/MultiStoreSelect";
import MultiSelect from "@/components/MultiSelect";
export default {
  name: "UserEdit",
  components: {
    MultiStoreSelect,
    MultiSelect,
  },
  props: {
    userinfo: {
      type: Object,
      default: {},
    }
  },
  watch: {
    userinfo: {
      handler(val) {
        this.data = JSON.parse(JSON.stringify(this.initData));
        if (Object.keys(val).length > 0) Object.assign(this.data, val);
      },
      immediate: true,
      deep:true
    },
    "data.rightList"(val) {
      console.log(val);
    }
  },
  created() {

  },
  data() {
    return {
      data: {

      },
      initData: {
        id: null,
        stores: '',
        storesList: [],
        right: '',
        rightList: [],
        name: '',
        mobile: '',
        isForbidden: 0,
        isResetPas: 0,
      },
      orgKeyPicker: false,
      rightPicker: false,
      orgKeyColumns: [],
    }
  },
  methods: {
    orgKeyPickerClick() {
      this.orgKeyPicker = true;
    },
    rightPickerClick() {
      this.rightPicker = true;
    },
    orgKeyConfirm() {

    }
  },
  computed: {
    storesName() {
      const storesNameList = [];
      const data = this.data.storesList;
      for (const i in data) storesNameList.push(this.$store.state.options.storeMap[data[i]].name);

      return storesNameList.join(',');
    },
    rightName() {
      const rightNameList = [];
      let data = this.data.rightList;
       console.log(data);
      for (const i in data)
        rightNameList.push(this.$store.state.options.rightList.find(item => item.value === data[i]).text)


      return rightNameList.join(',');
    }
  }
}
</script>

<style lang="scss">
.edit-user-show {
  .flex-center {
    img {
      margin-left:10px; margin-top: 14px; width: 25px;height: 25px
    }

    p {
      color: #666;font-weight: bold;margin-left: 10px;
    }
  }


}
</style>
